<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>Nginx 配置管理系统</h1>
          <div class="header-right">
            <el-dropdown>
              <span class="user-dropdown">
                {{ authStore.user?.username }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container class="home-container">
        <el-aside width="200px">
          <el-menu
            router
            :default-active="$route.path"
            class="menu"
          >
            <el-menu-item index="/">
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/nginx/config">
              <el-icon><Document /></el-icon>
              <span>配置管理</span>
            </el-menu-item>
            <el-menu-item index="/nginx/logs">
              <el-icon><List /></el-icon>
              <span>日志查看</span>
            </el-menu-item>
            <el-menu-item index="/nginx/ssl">
              <el-icon><Lock /></el-icon>
              <span>SSL 证书</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container class="content-container">
          <el-tabs
            v-model="activeTab"
            type="card"
            closable
            class="main-tabs"
            @tab-remove="removeTab"
            @tab-click="handleTabClick"
          >
            <el-tab-pane
              v-for="tab in tabs"
              :key="tab.path"
              :label="tab.title"
              :name="tab.path"
              :closable="tab.path !== '/'"
            >
            </el-tab-pane>
          </el-tabs>
          <el-main>
            <router-view v-slot="{ Component }">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { HomeFilled,Document, List, Lock, ArrowDown } from '@element-plus/icons-vue'

// 路由和状态管理
const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 类型定义
interface Tab {
  title: string
  path: string
}

// 标签页状态
const activeTab = ref(route.path)
const tabs = ref<Tab[]>([
  { title: '首页', path: '/' }
])

// 工具函数：获取标签标题
const getTabTitle = (path: string): string => {
  const routeMap: Record<string, string> = {
    '/nginx/config': '配置管理',
    '/nginx/logs': '日志查看',
    '/nginx/ssl': 'SSL 证书'
  }
  return routeMap[path] || '未知页面'
}

// 标签页操作函数
const addTab = (path: string) => {
  const existTab = tabs.value.find(tab => tab.path === path)
  if (!existTab) {
    tabs.value.push({
      title: getTabTitle(path),
      path: path
    })
  }
}

const removeTab = (targetPath: string) => {
  const targetIndex = tabs.value.findIndex(tab => tab.path === targetPath)
  if (targetIndex === -1) return

  tabs.value = tabs.value.filter(tab => tab.path !== targetPath)
  
  if (activeTab.value === targetPath) {
    // 如果关闭的是当前标签，则切换到前一个标签
    const nextTab = tabs.value[targetIndex - 1] || tabs.value[0]
    if (nextTab) {
      activeTab.value = nextTab.path
      router.push(nextTab.path)
    }
  }
}

const handleTabClick = (pane: any) => {
  if (pane.paneName) {
    router.push(pane.paneName)
  }
}

// 用户操作
const logout = () => {
  authStore.logout()
  router.push('/login')
}

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    activeTab.value = newPath
    addTab(newPath)
  },
  { immediate: true }
)
</script>

<style scoped>
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-container {
  overflow: hidden;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.header-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #001529;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 12px;
  color: #606266;
}

.menu {
  height: 100%;
  border-right: none;
}

.content-container {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.main-tabs {
  background-color: #fff;
  padding: 6px 16px 0;
  border-bottom: 1px solid #dcdfe6;
}

.el-main {
  padding: 16px;
}

:deep(.el-tabs__header) {
  margin: 0;
}
</style> 